@import "~assets/styles/_bootstrap";

.realname-wrapper {
	min-height: 100vh;
	background: #fff;

	.content {
		padding: rem(20px);

		.input-wrapper {
			display: flex;
			padding: rem(10px) 0;
			border-bottom: 1px solid #e0e0e0;

			.title-box {
				flex: 0 0 rem(100px);
				width: rem(100px);
				height: rem(36px);
				line-height: rem(36px);
				font-size: rem(15px);
				text-align: right;

				> span {
			    color: #c60a1e;
				}
			}

			.input-box {
				flex: 1;
				height: rem(36px);
				position: relative;

				> input {
					padding: 0 rem(35px) 0 rem(10px);
					width: 100%;
					height: rem(36px);
					font-size: rem(15px);
					border: none;
				}

				> i {
					position: absolute;
					top: 0;
					width: rem(30px);
					height: rem(36px);
					line-height: rem(36px);
					text-align: center;
					color: #999;
					font-size: rem(20px);
				}

				.icon-close2 {
					right: 0;
				}
			}

			.input-select {
				display: flex;

				> span {
					width: 100%;
					padding: 0 rem(35px) 0 rem(10px);
					height: rem(36px);
					line-height: rem(36px);
					font-size: rem(15px);
					color: #666;
				}

				> i.icon-enter {
					right: 0;

					&:before {
						color: #999;
					}
				}
			}

			.get-code {
				flex: 0 0 rem(100px);
				width: rem(100px);
				height: rem(36px);
				line-height: rem(36px);
				text-align: center;
		    background: #EC5151;
		    border-radius: rem(4px);
		    color: #fff;
		    font-size: rem(14px);
			}
		}

		.submit {
			padding-top: rem(30px);

			> button {
				display: block;
				width: 100%;
		    height: rem(42px);
		    line-height: rem(42px);
		    background: #EC5151;
		    text-align: center;
		    font-size: rem(16px);
		    color: #fff;
		    border: none;
		    border-radius: rem(4px);
		    cursor: pointer;
			}
		}

		.explain-wrapper {
			height: rem(20px);
	    line-height: rem(20px);
	    margin: rem(20px) 0;
	    color: #c60a1e;
	    font-size: rem(13px);
		}
	}

	.open {
		width: 100%;
	}
}